<template>
    <div>
        <div style="margin-top: 40px;padding-left:20px">
            <el-form :inline="true" size="mini" label-width="80px">
                <el-form-item label="合同编号：">
                    <el-input v-model.trim="orderSn"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            @click="getPageInfo()"
                            type="primary">
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="detail-container" v-loading="loading">
            <el-card class="box-card" v-if="show" style="padding:20px;width:840px;height:1188px;margin:0 auto">
                <div style="font-size:18px;color:#409EFF;font-weight: bold;margin-bottom:20px">
                    <span v-if="orderInfo.orderState!=40">此合同正在流转中 - </span>{{orderInfo.orderStateStr}}
                    <el-button type="primary" size="small" @click="toOrderDetail" style="float:right;margin-top:-10px">查看订单</el-button>
                </div>
                <div id="print-div2">
                    <div class="title">工业品买卖合同</div>
                    <div class="paper-top">
                        <el-row :gutter="30">
                            <el-col :span="15">
                                <el-row>
                                    <el-col :span="7"><div class="label" style="letter-spacing:2px">出卖人(供方)：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.sellerName}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="9">
                                <el-row>
                                    <el-col :span="7"><div class="label">合同编号：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.orderSn}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="9" :offset="15">
                                <el-row>
                                    <el-col :span="7"><div class="label">签订地点：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.orderAddress}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="15">
                                <el-row>
                                    <el-col :span="7"><div class="label" style="letter-spacing:2px">买受人(需方)：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.customerName}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="9">
                                <el-row>
                                    <el-col :span="7"><div class="label">签订日期：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.createDate}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="paper-title">
                        <span class="title-no">第一条</span>标的、数量、价款及交（提）货时间：
                    </div>
                    <div class="good-table">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-left:2px solid #000;border-bottom:2px solid #000">
                            <tr>
                                <th align="center" style="border-top:2px solid #000">商品名称</th>
                                <th align="center" style="border-top:2px solid #000">规格型号</th>
                                <th align="center" style="border-top:2px solid #000">单位</th>
                                <th align="center" style="border-top:2px solid #000">数量</th>
                                <th align="center" style="border-top:2px solid #000">单价(含税元)</th>
                                <th align="center" style="border-top:2px solid #000">金额（元）</th>
                                <th align="center" style="border-right: 2px solid #000;border-top:2px solid #000">备注</th>
                            </tr>
                            <tr v-for="item in orderInfo.orderGoods">
                                <td align="center"><div class="td-con">{{item.goodsName}}</div></td>
                                <td align="center"><div class="td-con" >{{item.goodsSn}}</div></td>
                                <td align="center" style="width:60px"><div class="td-con">{{item.unit}}</div></td>
                                <td align="center"><div  class="td-con" style="white-space:nowrap;">{{item.goodsNum}}</div></td>
                                <td align="center"><div class="td-con" style="white-space:nowrap;">{{item.goodsPrice}}</div></td>
                                <td align="center"><div style="white-space:nowrap;"  class="td-con">{{item.goodsAmount}}</div></td>
                                <td align="center"  style="border-right: 2px solid #000"><div class="td-con" style="max-width:150px">{{item.remark}}</div></td>
                            </tr>
                            <!--仅推广订单显示-->
                            <tr v-if="orderInfo.isMoresuOnlineOrder == 1">
                                <td colspan="2"  style="font-weight: normal;border-right: 1px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div style="letter-spacing: 11px;padding-left:15px">运费</div></td>
                                <td align="center" style="font-weight: normal;border-right: 0px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;width:60px"><div class="td-con"></div></td>
                                <td align="center" style="font-weight: normal;border-right: 0px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div  class="td-con" style="white-space:nowrap;"></div></td>
                                <td align="center" style="font-weight: normal;border-right: 0px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div class="td-con" style="white-space:nowrap;"></div></td>
                                <td align="center" style="font-weight: normal;border-right: 0px solid #000;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;"><div style="white-space:nowrap;"  class="td-con">{{orderInfo.orderShippingFee}}</div></td>
                                <td align="center"  style="font-weight: normal;border-top: 1px solid #000;padding: 5px 10px;line-height: 20px;border-right: 2px solid #000"><div class="td-con" style="max-width:150px"></div></td>
                            </tr>
                            <tr>
                                <td colspan="2"><div style="letter-spacing: 11px;padding-left:15px">合计</div></td>
                                <td align="center" style="border-right:0"></td>
                                <td align="center" style="border-right:0">{{orderInfo.ordGoodsNum}}</td>
                                <td align="center" style="border-right:0"></td>
                                <td align="center" style="border-right:0">{{orderInfo.goodsAmount}}</td>
                                <td align="center"  style="border-right: 2px solid #000"></td>
                            </tr>
                        </table>
                    </div>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no"><div style="white-space:nowrap;">第二条</div></td>
                            <td><div style="white-space:nowrap;">货物总金额：</div></td>
                            <td width="620" ><div class="tianXie">{{orderInfo.goodsAmountZH | fifterNull}}(供货方按规定开具增值税专用发票) 。</div></td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no"><div style="white-space:nowrap;">第三条</div></td>
                            <td><div style="white-space:nowrap;">质量标准、对质量负责的条件及期限：</div></td>
                            <td width="620"><div class="tianXie">按原厂出厂标准及原厂厂家售后服务标准执行。</div></td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no"><div style="white-space:nowrap;">第四条</div></td>
                            <td><div style="white-space:nowrap;">包装标准、包装物的供应与回收：</div></td>
                            <td width="620"><div class="tianXie">原厂包装，包装物不回收。</div></td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no"><div style="white-space:nowrap;">第五条</div></td>
                            <td><div style="white-space:nowrap;">标的物自</div></td>
                            <td width="640">
                                <span class="tianXie">买受人收到</span>
                                时起转移，但买受人未支付价款义务的，标的物仍属于出卖人。
                            </td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no" valign="top"><div style="white-space:nowrap;" >第六条</div></td>
                            <td valign="top"><div style="white-space:nowrap;">交（提）货方式、地点：</div></td>
                            <td width="620" valign="top">
                                <div class="tianXie">{{orderInfo.deliveryType | fifterNull}}</div>
                                <div class="tianXie" v-if="orderInfo.addressInfo != ''">{{orderInfo.addressInfo}}</div>
                            </td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no" valign="top"><div style="white-space:nowrap;" >第七条</div></td>
                            <td valign="top"><div style="white-space:nowrap;">运输方式及到达站（港）和费用负担：</div></td>
                            <td width="620" valign="top">
                                <div class="tianXie">{{orderInfo.sendType | fifterNull}}</div>
                            </td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no" valign="top"><div style="white-space:nowrap;" >第八条</div></td>
                            <td valign="top"><div style="white-space:nowrap;">检验标准及期限：</div></td>
                            <td width="620" valign="top">
                                <div class="tianXie">产品外观质量及数量交付时当场验收，产品内在质量买受人有异议，应于7日内书面提出，超出检验期未提异议的,视为对质量认可，标准按原厂执行。如实际交（收）货数量与合同有异，以实际数量为准。</div>
                            </td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no" valign="top"><div style="white-space:nowrap;" >第九条</div></td>
                            <td valign="top"><div style="white-space:nowrap;">结算方式、时间及地点：</div></td>
                            <td width="620" valign="top">
                                <div class="tianXie">{{orderInfo.settleType | fifterNull}}</div>
                            </td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no" valign="top"><div style="white-space:nowrap;" >第十条</div></td>
                            <td valign="top"><div style="white-space:nowrap;">违约责任：</div></td>
                            <td width="620" valign="top">
                            </td>
                        </tr>
                        <tr>
                            <td class="title-no" valign="top"></td>
                            <td valign="top" colspan="2">供方如承担赔偿责任的，仅限于需方的直接损失，并且不超过合同总货款的15%。需方如延期付款的，供方有权要求需方每日承担总货款0.08%的违约金，逾期超过三日，供方有权解除合同，合同解除后,需方还应按照合同总金额15%承担违约责任(不包含解除前的违约金)。</td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no" valign="top"><div style="white-space:nowrap;">第十一条</div></td>
                            <td valign="top"><div>合同争议解决方式：本合同在履行过程中发生的争议，由双方当事人协商解决；协调或调解不成的，依法向合同签订地人民法院起诉。</div></td>
                        </tr>
                    </table>
                    <table class="paper-title" border="0" width="100%">
                        <tr>
                            <td class="title-no" valign="top"><div style="white-space:nowrap;" >第十二条</div></td>
                            <td valign="top"><div style="white-space:nowrap;">其他约定事项：</div></td>
                            <td width="620" valign="top">
                            </td>
                        </tr>
                        <tr>
                            <td class="title-no" valign="top"></td>
                            <td valign="top" colspan="2">
                                <div>1、非供方原因或遭遇不可抗力如自然灾害、战争等，其他非正常因素如供方上游延迟发货或上游船期延误等而造成供方无法按时送货或需方提货的，供方不承担相应的违约责任。</div>
                                <div>2、收到合同后当日内盖章回传有效，合同传真或电子档件同样有效。本合同生效后，双方均应全面履行本合同约定的义务。任何一方不履行或不完全履行本合同约定义务的，应当承担相应的违约责任，并赔偿由此给守约方造成的损失，包括守约方为实现债权而支付的律师费、保全费诉费、鉴定费等。</div>
                                <div>3、本合同有效期为自合同签定之日起1年。</div>
                                <div>4、如在本合同签订日前双方还有未执行完的合同，发货按合同签订时间先后顺序执行。</div>
                                <div style="word-break:break-all" v-if="orderInfo.contractOtherRemark && orderInfo.contractOtherRemark != ''">5、{{orderInfo.contractOtherRemark}} </div>
                            </td>
                        </tr>
                    </table>
                    <div class="paper-bottom" style="position: relative">
                        <img :src="orderInfo.imageUrl" style="position: absolute;left: 95px; width: 156px;top: 0px;" v-if="orderInfo.orderState==40"/>
                        <el-row :gutter="20">
                            <el-col :span="12" style="text-align: center">出卖人</el-col>
                            <el-col :span="12" style="text-align: center">买受人</el-col>
                        </el-row>
                        <el-row :gutter="20" style="margin-top:10px">
                            <el-col :span="12">
                                <el-row>
                                    <el-col :span="7"><div class="label" style="letter-spacing:2px">出卖方(章)：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.sellerName}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="12">
                                <el-row>
                                    <el-col :span="7"><div class="label">买受人（章）：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.customerName}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-row>
                                    <el-col :span="7"><div class="label"><span style="padding-right:54px">电</span>话：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.sellerPhone}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="12">
                                <el-row>
                                    <el-col :span="8"><div class="label"><span style="padding-right:56px">电</span>话：</div></el-col>
                                    <el-col :span="16">
                                        <div class="text"></div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-row>
                                    <el-col :span="7"><div class="label"><span style="padding-right:54px">传</span>真：</div></el-col>
                                    <el-col :span="17">
                                        <div class="text">{{orderInfo.sellerFax}}</div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="12">
                                <el-row>
                                    <el-col :span="8"><div class="label"><span style="padding-right:56px">传</span>真：</div></el-col>
                                    <el-col :span="16">
                                        <div class="text"></div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <div style="text-align: right;margin-top:20px">常州市工商管理局监制</div>

                    </div>
                </div>


            </el-card>
            <div style="text-align: center;font-size:16px;padding:40px;color:#888" v-if="noData">⊙▽⊙  没有查询到记录或此合同已作废！</div>
        </div>
    </div>

</template>

<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {printOrder} from '@/api/partner'
    import "@/utils/jQuery.print"
    export default {
        name: "customerDetail",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                type:2,
                orderInfo:{},
                orderSn:'',
                show:false,
                noData:false,
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {

        },
        filters: {
            fifterNull(val){
                if(val == ''){
                    return '无'
                }else{
                    return  val
                }
            }
        },
        methods:{

            //去订单详情
            toOrderDetail(item){
                let routeData = this.$router.resolve({name:'saleDetail',query:{id:this.orderInfo.orderId,type:'see'}});
                window.open(routeData.href);
            },


            //获取合同详情
            getPageInfo(){
                if(this.orderSn != ''){
                    this.loading = true;
                    this.noData = false;
                    printOrder({orderSn:this.orderSn,type:this.type}).then(res=>{
                        this.orderInfo = res;
                        this.loading = false;
                        this.show = true;
                        this.noData = false;
                    }).catch(()=>{
                        this.loading = false;
                        this.show = false;
                        this.noData = true;
                    })
                }

            },


        }
    }
</script>

<style  lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }
    #print-div2{
        font-size:12px;
        font-family: "SimSun";
        .title{
            font-size:18px;
            font-weight: bold;
            text-align: center;
            line-height: 22px;
            padding-top:20px;
        }
        .paper-top{
            font-size:14px;
            margin-top:10px;
            .label{
            }
            .text{
                border-bottom:1px solid #000;
            }
            margin-bottom:10px;
        }
        .paper-title{
            font-size:14px;
            line-height: 20px;
            .title-no{
                padding-right:10px;
            }
            .tianXie{
                font-size:14px;
                text-decoration: underline;
            }
        }
        .good-table{
            table{
                border-left:2px solid #000;
                border-bottom:2px solid #000;
                th{
                    font-weight: normal;
                    font-size:14px;
                    border-top:2px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                    border-right:1px solid #000;
                }
                td{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
                .td-con{
                    word-break:break-all;
                    font-size:12px;
                }
            }
        }
        .paper-bottom{
            margin-top:20px;
            line-height: 20px;
            font-size:14px;
        }
    }
</style>
